<template>
	<gui-page ref="guipage">
		<view slot="gBody">
			<view class="setList">
				<radio-group @change="radioChange">
					<view class="sexItems" v-for="(item, index) in items" :key="item.value">
						<label id="item.value">
							<view>{{item.name}}</view>
							<radio color="#FF5151" :value="item.value" :checked="item.value == currentIndex"
								style="transform:scale(0.7)" />
						</label>
					</view>
				</radio-group>
			</view>
			<view class="saveBtn" @tap="submit">确认</view>
		</view>
	</gui-page>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				items: [{
						value: '0',
						name: '男',

					},
					{
						value: '1',
						name: '女',
					}, {
						value: '2',
						name: '保密',
					}
				],
				currentIndex: 0
			}
		},
		onLoad(options) {
			console.log(options)
			this.currentIndex = parseInt(options.sex)
		},
		methods: {
			radioChange: function(e) {
				console.log(e.target.value);
				this.currentIndex = e.target.value
			},
			submit() {
				this.$http.post('/api/oauth/edit', {
					gender: this.currentIndex
				}).then(res => {
					this.$u.msg('修改成功！')
					this.vuex_userInfo.gender = this.currentIndex
					this.$u.vuex('vuex_userInfo', this.vuex_userInfo);
					this.$u.back(1, 1000)
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background: #F6F7F8;
	}

	.setList {
		padding-top: 20rpx;
	}

	.sexItems {
		padding: 15px 30px 15px 30px;
		font-size: 28rpx;
		border-bottom: 1px solid #F8F8F8;
		background: #FFFFFF;

		label {
			display: flex;
			justify-content: space-between;
		}
	}

	.sexItems:last-child {
		border: none;
	}
	.saveBtn{
		width: 513rpx;
		height: 80rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
</style>